{include file="public/header" /}
<div class="layui-body">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">角色列表</li>
            <li class="layui-btn"><a href="javascript:void(0)"  onclick="change()" style="color: white">添加角色</a></li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th style="width: 30px;text-align: center">ID</th>
                        <th style="text-align: center">角色名</th>
                        <th style="text-align: center">权限范围</th>
                        <th style="text-align: center">状态</th>
                        <th style="text-align: center;width:100px">操作</th>
                    </tr>
                    </thead>
                    <tbody >
                    {volist name="list" id="val"}
                    <tr id="dels{$val.id}">
                        <td style="text-align: center">{$val.id}</td>
                        <td style="text-align: center">{$val.role_name}</td>
                        <td style="text-align: center ;width:500px; height:50px; line-height:25px; overflow:hidden">{$val.access_name}</td>

                            {if condition="($val['status']==0)"}
                            <td style="text-align: center">
                            启用
                            </td>
                            {/if}
                            {if condition="($val['status']==1)"}
                             <td style="text-align: center">
                            禁用
                             </td>
                            {/if}


                        <td>
                            <a href="javascript:void(0)" class="layui-btn layui-btn-normal layui-btn-mini" onclick="go('{$val.id}')">编辑</a>
                            <a href="javascript:void(0)" class="layui-btn layui-btn-danger layui-btn-mini" onclick="del('{$val.id}')">删除</a>
                        </td>
                    </tr>
                    {/volist}


                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


{include file="public/footer" /}
<script>
    /*跳转页面*/
    function change(){
        window.location.href='{:url("add")}';
    }
    /*修改跳转*/
    function go(id){
        window.location.href='{:url("update")}'+'?id='+id;
    }

        /*删除单个*/
    function del(id) {
        //ajax实现异步删除数据（逻辑删除，只是改变字段的状态）
        $.ajax({
            type: "POST",
            url: "{:url('Role/del')}",
            data: 'id='+id,
            dataType: "json",
            success: function (data) {
                // debugger;
                // alert(data+"##"+1);
                //window.location.reload(data);
                //layer弹出层
                var aa=layer.load(2,{shade:false});
                //一秒过后弹出层消失
                setTimeout(function(){
                    layer.close(aa);
                    layer.msg('删除成功！！！')
                    //获取点击删除的节点
                    var child=document.getElementById("dels"+id);
                    //把获取到的节点删除掉
                    child.remove();
                },1000);
            },error: function(err){
                alert("数据已逃跑，请刷新页面");
            }
        })

    }
    /*
    * */


</script>